<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/5/4
  Time: 9:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/bootstrap-theme.css" type="text/css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/res/style2.css" type="text/css" />

    <style type="text/css">
        .form{text-align: center;padding: 10px 0;}
    </style>
</head>
<body>
<form role="form" class="form-inline form" >
    <div class="form-group">

        <div class="input-group">
            <span class="input-group-addon">年份：</span>
            <select class="form-control"  name="year"  id="year" style="width:100px">
                <c:forEach var="var" items="${years}">

                    <c:choose>
                        <c:when test="${var == year}"><option value="${var}" selected="selected">${var}</option></c:when>
                        <c:otherwise><option value="${var}">${var}</option></c:otherwise>
                    </c:choose>
                </c:forEach>
            </select>
        </div>

        <div class="input-group">
            <span class="input-group-addon">月份：</span>
            <select class="form-control"  name="month"  id="month" style="width:100px">
                <c:forEach var="var" items="${months}">
                    <option value="${var}">${var}</option>
                </c:forEach>
            </select>
        </div>

        <div class="input-group">
            <span class="input-group-addon">是否重复：</span>
            <select class="form-control"  name="provinceId"  id="Province" style="width:100px">
                <option>是</option>
                <option>否</option>
            </select>
        </div>
        <a href="javascript:click();" class="btn btn-primary">查询</a>
    </div>
</form>

<div id="test" style="height:600px;"></div>

<script src="${pageContext.request.contextPath}/res/jquery-1.8.0.min.js"></script>
<script src="${pageContext.request.contextPath}/res/bootstrap.min.js"></script>
<script type="text/javascript" src="res/echarts.js"></script>
<script>
    $(function () {
        click();
    });
    function click() {
        var xAxisDataJson = [];
        var currentDataJson = [];
        var lastDataJson = [];
        var diffDataJson = [];
        var increaseDataJson = [];
        var equJson = 10;
        var lMax = 100;
        var lMin = 0;

        $.ajax({
            url:"power?"+$("#form").serialize(),
            type:"post",
            contentType: "application/json; charset=utf-8",
            async:false,
            cache: false,
            processData: false,
            success:function(data){
                for(var i=0;i<data.xAxis.length;i++){
                    xAxisDataJson[i] = data.xAxis[i];
                    currentDataJson[i] = data.currentData[i];
                    lastDataJson[i] = data.lastData[i];
                    diffDataJson[i] = data.diffData[i];
                    increaseDataJson[i] = data.increaseData[i];

                }

                equJson = data.lEqualization;
                lMax = data.lMax;
                lMin = data.lMin;
            }
        });

//        var barData = {
//            xAxisData:function(){
//                return xAxisDataJson;
//            },
//            currentData:function(){
//                return currentDataJson;
//            },
//            lastData:function(){
//                return lastDataJson;
//            },
//            diffData:function(){
//                return diffDataJson;
//            },
//            increaseData:function(){
//                return increaseDataJson;
//            }
//        };

        var myChart = echarts.init(document.getElementById('test'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data:['今年的总量','去年的总量','增量','增幅']
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel:{
                        interval:0,
                        rotate:45,
                        margin:2,
                        textStyle:{
                            color:"#222"
                        }
                    },
                    data: xAxisDataJson
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '总量',
                    min: lMin,
                    max: lMax,
                    interval: equJson,
                    axisLabel: {
                        formatter: '{value} 万元'
                    }
                },
                {
                    type: 'value',
                    name: '增幅',
                    min: -1000,
                    max: 200,
                    interval: 200,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name:'今年的总量',
                    type:'bar',
                    data:currentDataJson
                },
                {
                    name:'去年的总量',
                    type:'bar',
                    data:lastDataJson
                },
                {
                    name:'增量',
                    type:'bar',
                    data:diffDataJson
                },
                {
                    name:'增幅',
                    type:'line',
                    yAxisIndex: 1,
                    data:increaseDataJson
                }
            ]
        };

        myChart.setOption(option);
    }

</script>
</body>
</html>
